<template>
  <Dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="1400px"
    :scroll="true"
    maxHeight="580px"
  >
     <div class="per-box">
      <iframe
        v-if="iframeUrl"
          :src="iframeUrl"
          frameborder="0"
          width="100%"
          height="100%"
        ></iframe>
     </div>
  </Dialog>
</template>
<script lang="ts" setup>
import { getKKFilePreviewUrl } from "@/utils/file";
defineOptions({ name: 'KKFilePreview' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题

const iframeUrl = ref<string>('');

// 获取真实文件地址
const getRealFileUrl = async (url: string | null) => {
  if (!url) return;
  try {
    const res = await getKKFilePreviewUrl(url);
    iframeUrl.value = res;
  }finally{

  }
}

/** 打开弹窗 */
const open = async (url?: string | null) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.preview')
  getRealFileUrl(url);
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
<style lang="scss" scoped>
.per-box{
  width: 100%;
  height: 850px;
}
</style>
